<template>
	<view>
		<view class="page">
			<scroll-view scroll-y="true" class='shoppage' @scrolltolower="scrolltolower">
				<view class="search">
					<image @click="handleinput" src="@/static/img/ic_sy_ss.png" mode=""></image>
					<input @confirm="handleinput" v-model="searchValue" type="text" placeholder="请输入相关搜索...">
				</view>
				<view class="explosive">
					<view style="margin-top: 100upx;" v-if="list.length == 0">
						<u-empty text=" - 未查询到订单 - " mode="list"></u-empty>
					</view>
					<view class="box-item" v-for="(item,index) in list" :key="index" @click="detail(item.id)">
						<view class="uniBtn">
							<view class="left_info">
								{{item.user.name}}
								<text v-if="item.user.sex == 1" class="sex">男</text>
								<text v-else class="sex">女</text>
								<text>{{item.user.nianling}}</text>
							</view>
							<view v-if="item.status==0" class="stu">待支付</view>
							<view v-else-if="item.status==1" class="stu1">待接单</view>
							<view v-else-if="item.status==2" class="stu2">待发药</view>
							<view v-else-if="item.status==3" class="stu3">已发药</view>
							<view v-else-if="item.status==4" class="stu4">已签收</view>
						</view>
						<view>编号：{{item.number}} <text class="stu5 stu2">快递</text></view>
						<view>开方时间：{{item.created_at}}</view>
						<view v-if="item.pay_time">支付时间：{{item.pay_time}}</view>
						<view class="uniBtn">
							<view>剂型：{{item.typestr}}</view>
							<view class="stu">￥{{item.price}}</view>
						</view> 
					</view>
				</view>
				<view style="width: 100%;height: 120upx;"></view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: '',
				page: 1,
				limit: 10,
				list: [],
				length: true,
			}
		},
		onLoad() {
			if(!uni.getStorageSync("servicetoken")){
				uni.reLaunch({
					url:'/pages/login/login'
				})
			}else{
				this.getList()
			}
		},
		methods: {
			// 上拉
			scrolltolower() {
				console.log('触底')
				if (this.length) {
					this.page++
					this.getList();
				}
			},
			// 搜索
			handleinput(){
				this.page = 1;
				this.list = [];
				this.getList();
			},
			async getList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				let res = await this.$api.lists({
					key: this.searchValue,
					page: this.page,
					listRows: this.limit
				});
				if (res.code == 200) {
					uni.hideLoading()
					this.length = res.data.data.length == this.limit
					this.list.push(...res.data.data);
				}
			},
			detail(id) {
				uni.navigateTo({
					url: '/pages/detail/detail?id=' + id
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;

		.shoppage {
			width: 100%;
			flex: 1;
			overflow: hidden;
			padding-top:20upx;
			
			.search {
				width: 720upx;
				height: 60upx;
				background: #fff;
				border-radius: 30upx;
				display: flex;
				align-items: center;
				padding-left: 30upx;
				box-sizing: border-box;
				margin: 0 auto;
				border:1px solid #eee;
				
				input{
					flex: 1;
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
				}
				image {
					width: 26upx;
					height: 26upx;
					margin-right: 10upx;
				}
			
				view {
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #B3B3B3;
				}
			}

			.explosive {
				margin: 0 20upx;
				flex: 1;
				overflow: hidden;
			}
			
			.box-item {
				position: relative;
				z-index: 1;
				box-sizing: border-box;
				margin:30upx auto;
				line-height: 160%;
				font-size: 30upx;
				border-bottom:1px solid #eee;
				padding-bottom:30upx;
				
				.uniBtn{
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				.left_info{
					font-size: 28upx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #414141;
					
					
					text {
						font-weight: 200;
					}
					
					.sex {
						padding: 0 24upx;
						margin: 0 24upx;
						border-left: 2upx solid #CCCCCC;
						border-right: 2upx solid #CCCCCC;
					}
				}
				.stu{
					color: #EE2727;
				}
				.stu1{
					color: #009688;
				}
				.stu2{
					color: #008000;
				}
				.stu3{
					color: #FFB800;
				}
				.stu4{
					color: #666666;
				}
				.stu5{
					margin: 0 15upx;
				}
				.stu6-7{
					color: #ffffff;
					font-size: 26upx;
					padding: 3upx 10upx;
					border-radius: 5upx;
				}
				.stu6{
					background: #1E9FFF;
				}
				.stu7{
					background: #DEA512;
				}
			}
		}
	}
</style>